<template>
  <div class="app-container">
    <vaeTable
      ref="vaeTable"
      :data="list"
      :option="option"
      v-model="form"
      :page="page"
      :loading="listLoading"
      @pagination="pagination"
      @on-load="onLoad"
      @row-save="rowSave"
      @row-edit="rowEdit"
      @row-delete="rowDelete"
      @open="open"
    >
      <template v-slot:menu="slotProps">
        <el-button type="info" size="" @click="handleOptoin(slotProps)"
          >修改配置</el-button
        >
      </template>
    </vaeTable>
    <Dialog :show.sync="show" :full="false" :title="'配置'">
      <el-input
        type="textarea"
        :rows="15"
        class="area"
        :autosize="{ minRows: 2, maxRows: 28 }"
        placeholder="请输入内容"
        v-model="form.chartOption"
      >
      </el-input>
      <div style="margin-top: 20px" class="flex justify-end">
        <el-button type="success" size="" @click="handleOPsubmit"
          >修改</el-button
        >
      </div>
    </Dialog>
  </div>
</template>

<script>
import {
  getChartList,
  getChartInfo,
  getChartInsert,
  getChartDelete,
  getChartUpdate,
} from "@/api/charts";
import JsonEditor from "@/components/JsonEditor";
import vaeTable from "@/components/vae-table";
import Dialog from "@/components/Dialog";
import vaeForm from "@/components/vae-form";
import list from "@/mixin/list";
export default {
  components: { vaeTable, vaeForm, Dialog, JsonEditor },
  mixins: [list],
  data() {
    return {
      form: {
        cookieName: "",
        cookieContent: "",
        cookieImg: "",
        recommend: "",
      },
      show: false,
      value: {},
      option: {
        contralWidth: "400px",
        contralSize: "",
        labelWidth: "120px",
        column: [
          {
            label: "图表名称",
            prop: "chartName",
            width: 120,
            type: "input",
            rules: [
              { required: true, message: "请输入图表名称", trigger: "blur" },
            ],
          },
          {
            label: "图表封面",
            prop: "chartImg",
            type: "img",
            width: 120,
            rules: [
              { required: true, message: "请传入图片", trigger: "change" },
            ],
          },
          {
            label: "图表简介",
            prop: "chartDesc",
            type: "input",
            subtype: "textarea",
          },
           {
            label: "图表类型",
            prop: "chartType",
            type: "select",
            options: [
              {label: '图表',value:'chart'},
              {label: '文本',value:'text'},
            ],
             dicData: [
              { key: 'chart', value: "图表" },
              { key: 'text', value: "文本" },
            ],
          },
          {
            label: "是否推荐",
            prop: "recommend",
            width: 120,
            type: "select",
            options: [
              { label: "是", value: 1 },
              { label: "否", value: 0 },
            ],
            dicData: [
              { key: 1, value: "是" },
              { key: 0, value: "否" },
            ],
          },
        ],
      },
      list: null,
      listLoading: true,
    };
  },
  created() {},
  methods: {
    onLoad() {
      this.listLoading = true;
      getChartList(this.query).then((res) => {
        if (res.status == 1) {
          this.list = res.data.data;
          this.page.page = res.data.page.page;
          this.page.limit = res.data.page.pageSize;
          this.page.total = res.data.page.total;
        }
        this.listLoading = false;
      });
    },
    // 点击按钮前触发
    open({ row, type }) {
      if (type == "info" || type == "edit") {
        getChartInfo({ id: row.chartId }).then((res) => {
          if (res.status == 1) {
            this.form = res.data;
          }
        });
      }
    },
    // 点击新增提交
    rowSave(done) {
      getChartInsert(this.form).then((res) => {
        if (res.status == 1) {
          this.onLoad();
          this.$message({
            message: res.msg,
            type: "success",
          });
          done();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 编辑提交
    rowEdit(done) {
      getChartUpdate(this.form).then((res) => {
        if (res.status == 1) {
          this.show = false;
          this.onLoad();
          this.$message({
            message: res.msg,
            type: "success",
          });
          done();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 删除
    rowDelete({ row }) {
      this.$confirm("确定删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        getChartDelete({ id: row.chartId }).then((res) => {
          if (res.status == 1) {
            this.onLoad();
            this.$message({
              message: res.msg,
              type: "success",
            });
          }
        });
      });
    },
    handleOptoin({ item }) {
      getChartInfo({ id: item.chartId }).then((res) => {
        if (res.status == 1) {
          this.show = true;
          this.form = res.data;
        }
      });
    },
    handleOPsubmit() {
      getChartUpdate({
        chartId: this.form.chartId,
        isJson: true,
        chartOption: this.form.chartOption,
      }).then((res) => {
        if (res.status == 1) {
          this.show = false;
          this.onLoad();
          this.$message({
            message: res.msg,
            type: "success",
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar {
  width: 60px;
  height: 60px;
  object-fit: cover;
}
.area {
  background: black;
  ::v-deep .el-textarea__inner {
    background: #333;
    color: white;
  }
}
</style>